<template>
	<view class="goods-search">

		<view class="header-wrap">
			<u-sticky offset-top="0" h5-nav-height="0">
				<view class="search">
					<u-search v-model="keyword" @focus="showHistory = true" :focus="showHistory" @search="onSearch"
						bg-color="#F4F4F4"></u-search>
				</view>
			</u-sticky>
		</view>
		<view v-show="showHistory" class="content bg-white">
			<view v-if="hotList.length" class="search-words">
				<view class="title">热门搜索</view>
				<view class="words row wrap">
					<view v-for="(item, index) in hotList" :key="index" class="item br60  mr20 mb20 lighter sm line1"
						@tap="onChangeKeyword(item)">{{ item }}
					</view>
				</view>
			</view>
			<view v-if="historyList.length" class="search-words">
				<view class="title row-between">
					<view>历史搜索</view>
					<view class="xs muted mr20" style="padding: 10rpx 20rpx" @tap="clearSearchFun">清空</view>
				</view>
				<view class="words row wrap">
					<view v-for="(item, index) in historyList" :key="index"
						class="item br60  mr20 mb20 lighter sm line1" @tap="onChangeKeyword(item)">{{ item }}
					</view>
				</view>
			</view>
		</view>
		<view v-show="!showHistory" class="content">
			<view class="goods-list">
				<view v-for="(produtcInfo,index) in goodsList" :key="index" class="bg-white product-basics-info-area"
					@click="goPage(produtcInfo.url,produtcInfo.open_type,produtcInfo.type)">
						<view class="row">
							<image :src="produtcInfo.image" mode="scaleToFill" class="logo u-margin-left-15"></image>
							<view class="md bold u-line-1 u-padding-left-10">
								{{produtcInfo.title||''}}
							</view>
							<text class="xxs u-padding-left-15 lable u-margin-left-15">{{produtcInfo.mode_repayment||''}}</text>
						</view>
						<view class="u-color-999999 xxs u-padding-top-10">
							贷款期限:{{produtcInfo.allotted_time||''}} | 利率:{{produtcInfo.annual_interest_rate||''}}
						</view>
						<view class="row u-padding-bottom-20">
							<view class="row u-margin-top-30 u-text-center u-flex-1"
								v-if="produtcInfo.settlement_interval || produtcInfo.scope_credit">
								<view class="u-padding-right-20" v-if="produtcInfo.settlement_interval">
									<view class="xl bold red">{{produtcInfo.settlement_interval||''}}</view>
									<view class="xs">结算周期</view>
								</view>
								<view v-if="produtcInfo.scope_credit">
									<view class="xl bold red">{{produtcInfo.scope_credit}}</view>
									<view class="xs">授信范围</view>
								</view>
							</view>
							<view class="link-btn">
								查看详情
							</view>
						</view>
					</view>
			</view>
			<loading-footer :status="status" :slot-empty="true">
				<view slot="empty" class="column-center" style="padding-top: 200rpx">
					<image class="img-null" src="/static/images/goods_null.png"></image>
					<text class="lighter">暂无产品</text>
				</view>
			</loading-footer>
		</view>
		<hint-buy-vip-message ref="hintBuyVip"></hint-buy-vip-message>
	</view>
</template>

<script>
	import {
		getGoodsSearch,
		getSearchpage,
		clearSearch
	} from '@/api/store';
	import {
		getUser
	} from '@/api/user';
	import {
		trottle,
		loadingFun,
		getRect
	} from '@/utils/tools';
	import {
		loadingType
	} from '@/utils/type';

	export default {
		data() {
			return {
				keyword: '',
				status: loadingType.LOADING,
				page: 1,
				goodsType: 'double',
				goodsList: [],
				priceSort: '',
				saleSort: '',
				showHistory: false,
				hotList: [],
				historyList: []
			};
		},

		components: {},
		props: {},
		watch: {
			// 监听属性
			keyword(value, old) {
				if (!value && !this.id) {
					this.showHistory = true
				}
			},
			showHistory(value) {
				if (value) {
					this.getSearchpageFun();
				}
			}

		},
		computed: {
			comprehensive() {
				const {
					priceSort,
					saleSort
				} = this
				if (priceSort == '' && saleSort == '') {
					return true;
				}

				return false;
			}

		},


		onLoad(options) {
			this.onNormal = trottle(this.onNormal, 500, this);
			this.onPriceSort = trottle(this.onPriceSort, 500, this);
			this.onSaleSort = trottle(this.onSaleSort, 500, this);
			this.onSearch = trottle(this.onSearch, 500, this);
			this.keyword = options.keyword;
			if (this.keyword) {
				this.onRefresh()
			}
			this.init(options);
		},


		onReachBottom: function() {
			this.getGoodsSearchFun();
		},
		methods: {
			onChange(e) {
				this.keyword = e.value
			},

			changeType() {
				this.goodsType = this.goodsType === 'one' ? 'double' : 'one'
			},

			clearSearchFun() {
				clearSearch().then(res => {
					if (res.code == 1) {
						this.getSearchpageFun();
					}
				});
			},

			onNormal() {
				this.priceSort = ''
				this.saleSort = ''
				this.onRefresh();
			},

			onPriceSort() {
				let {
					priceSort
				} = this;
				this.saleSort = ''
				this.priceSort = priceSort == 'asc' ? 'desc' : 'asc'
				this.onRefresh();
			},

			onSaleSort() {
				let {
					saleSort
				} = this;
				this.priceSort = ''
				this.saleSort = saleSort == 'desc' ? 'asc' : 'desc'
				this.onSearch();
			},

			init(option) {
				let {
					id,
					name,
					type
				} = option;
				this.type = type;
				if (id) {
					uni.setNavigationBarTitle({
						title: name
					});
					this.id = id;
					this.getGoodsSearchFun();
				} else {
					uni.setNavigationBarTitle({
						title: '搜索'
					});
					this.showHistory = true
				}
			},

			getSearchpageFun() {
				getSearchpage().then(res => {
					if (res.code == 1) {
						let {
							history_lists,
							hot_lists
						} = res.data;
						this.hotList = hot_lists
						this.historyList = history_lists
					}
				});
			},

			onClear() {
				if (this.id) {
					this.onSearch();
				}
			},
			onSearch() {
				this.onRefresh()
			},
			onRefresh() {
				this.showHistory = false
				this.page = 1
				this.goodsList = []
				this.status = loadingType.LOADING
				this.$nextTick(() => {
					this.getGoodsSearchFun();
				});
			},

			onChangeKeyword(item) {
				this.keyword = item
				this.showHistory = false
				this.onRefresh();
			},

			async getGoodsSearchFun() {
				let {
					page,
					goodsList,
					keyword,
					priceSort,
					saleSort,
					status
				} = this;
				if (status == loadingType.FINISHED) return;
				const params = {
					category_id: this.type == 1 ? this.id : '',
					brand_id: this.type == 0 ? this.id : '',
					page_no: page,
					keyword,
					price: priceSort,
					sales_sum: saleSort
				}
				const data = await loadingFun(getGoodsSearch, page, goodsList, status, params)
				if (!data) return
				this.page = data.page
				this.goodsList = data.dataList
				this.status = data.status
			},
			isURL(url) {

				const strRegex = '^((https|http|ftp)://)?' //(https或http或ftp):// 可有可无
					+
					'(([\\w_!~*\'()\\.&=+$%-]+: )?[\\w_!~*\'()\\.&=+$%-]+@)?' //ftp的user@ 可有可无
					+
					'(([0-9]{1,3}\\.){3}[0-9]{1,3}' // IP形式的URL- 3位数字.3位数字.3位数字.3位数字
					+
					'|' // 允许IP和DOMAIN（域名）
					+
					'(localhost)|' //匹配localhost
					+
					'([\\w_!~*\'()-]+\\.)*' // 域名- 至少一个[英文或数字_!~*\'()-]加上.
					+
					'\\w+\\.' // 一级域名 -英文或数字 加上.
					+
					'[a-zA-Z]{1,6})' // 顶级域名- 1-6位英文
					+
					'(:[0-9]{1,5})?' // 端口- :80 ,1-5位数字
					+
					'((/?)|' // url无参数结尾 - 斜杆或这没有
					+
					'(/[\\w_!~*\'()\\.;?:@&=+$,%#-]+)+/?)$'; //请求参数结尾- 英文或数字和[]内的各种字符
				const re = new RegExp(strRegex, 'i'); // 大小写不敏感
				if (re.test(encodeURI(url))) {
					return true;
				}
				return false;
			},
			goPage(url, open_type, type) {

				if (!this.isLogin) return toLogin();
				uni.showLoading({
					title: '加载中'
				});
				getUser().then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						if (type == 0) {
							if (res.data.is_vip == 0) {
								this.$refs.hintBuyVip.show()
								return false
							}
						}
						if (open_type == 1) {
							uni.navigateTo({
								url: url
							})
						} else if (open_type == 2 || open_type == 3) {
							if (this.isURL(url)) {
								// #ifdef APP
								uni.navigateTo({
									url: "/pages/webview/webview?url=" + url,
								});
								// #endif
								// #ifndef APP
								window.location.href = url;
								// #endif
							} else {
								uni.navigateTo({
									url: url,
									fail(e) {
										console.log(e)
									}
								})
							}
						}
					} else {
						this.$refs.uToast.show({
							title: '系统错误，请稍后重试',
							type: 'error'
						})
					}
				})

			},
		}
	};
</script>
<style lang="scss">
	.goods-search {
		.header-wrap {
			.search {
				box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.03);
				position: relative;
				z-index: 1;
			}

			.header {
				height: 80rpx;

				.tag {
					height: 100%;
					flex: 1;
				}
			}
		}

		.product-basics-info-area {

			margin: 10px 10px 0;
			padding: 10px 10px 0;
			border-radius: 5px;
			background: linear-gradient( 180deg, #EFF5FF 0%, #FFFFFF 100%);


				.logo {
					height: 36rpx;
					width: 36rpx;
					border-radius: 100rpx;
				}
				
				.lable{
					color: #3F70FF;
					padding: 5rpx 10rpx;
					border-radius: 100rpx;
					background: rgba(63, 112, 255, .1);
				}

				.red {
					color: red;
				}
				
				.link-btn{
					color: white;
					padding: 10rpx 20rpx;
					border-radius: 100rpx;
					background: linear-gradient( 90deg, #73A9FF 0%, #3F70FF 100%);
				}

		}

		.content {
			.search-words {
				padding-left: 24rpx;
				padding-bottom: 20rpx;

				.title {
					padding: 26rpx 0;
				}

				.words {
					.item {
						line-height: 52rpx;
						height: 52rpx;
						padding: 0 24rpx;
						background-color: #F5F5F5;
					}
				}
			}

			.goods-list {
				overflow: hidden;
			}
		}
	}
</style>